<template>
	<view>
		<!-- <view class="Agelist" v-for="(item,index) in getAgeGradeslist" :key="index" @tap="goRoom(item)">
			<image :src="item.cover" class="Agelist_avatar"></image>
			<view class="Agelist_info">
				<view class="Agelist_infochild">{{item.title}}</view>
				<view v-if="item.language_level == 'Zero basis'" class="Agelist_infochild">零基础</view>
				<view v-else-if="item.language_level == 'Primary'" class="Agelist_infochild">初级</view>
				<view v-else-if="item.language_level == 'Intermediate'" class="Agelist_infochild">中级</view>
				<view v-else-if="item.language_level == 'Senior'" class="Agelist_infochild">高级</view>
			</view>
			<view class="Agelist_type">
				<image v-if="item.group_type=='online_video'" src="/static/jingyu/shipin.png" mode="" class="Agelist_typechild"></image>
				<image v-else-if="item.group_type=='online_voice'" src="/static/jingyu/yuyin.png" mode="" class="Agelist_typechild"></image>
				<view v-if="item.group_type=='online_video'" class="Agelist_typechild" style="color: #06C1AE;">视频直播课堂</view>
				<view v-else-if="item.group_type=='online_voice'" class="Agelist_typechild" style="color: #F232E7;">语音直播课堂</view>
				<view class="Agelist_typechild" style="padding-left: 8%;">已结束</view>
				<view class="Agelist_typechild">{{name}}</view>
			</view>
		</view> -->
			<view class="padding-box">
				<view class="tuijianList">
					<view @tap="goRoom(item)" class="tuijianItem" v-for="(item,index) in getAgeGradeslist" :key="index">
						<view v-if="item.innull == 'true'">
							<view class="null_images">
								<image src="../../../static/null.png" mode="aspectFill"></image>
							</view>
						</view>
						<view v-else>
							<image class="coverImg" :src="item.cover" mode=""></image>
							<view class="GroupOwner">
								<image :src="item.map.userinfo.avatar" mode=""></image>
								<text>{{item.map.userinfo.nick_name}}.{{item.map.userinfo.country}}</text>
							</view>
							<view class="titleTop">
								<view class="">{{item.title}}</view>
							</view>
							<view  v-if="item.mess==true">
								<view class="airtimes">
									<view class="thisairtimeimgs">
										<image src="../../../static/时间.png" mode="aspectFill"></image>
									</view>
									<view class="theairtimes">当前课程已结束</view>
								</view>
							</view>
							<view class="titleTops">
								<image v-if="item.group_type=='online_video'" src="/static/jingyu/Onlinevideo.png" mode=""></image>
								<image v-else-if="item.group_type=='online_voice'" src="/static/jingyu/Onlinevoice.png" mode=""></image>
								<view>
									<view v-if="item.age_grade == 'Childhood'&& item.language_level == 'Zero basis'" class="titleTop-leaver">幼儿·零基础</view>
									<view v-else-if="item.age_grade == 'Childhood'&& item.language_level == 'Primary'" class="titleTop-leaver">幼儿·初级</view>
									<view v-else-if="item.age_grade == 'Childhood'&& item.language_level == 'Intermediate'" class="titleTop-leaver">幼儿·中级</view>
									<view v-else-if="item.age_grade == 'Childhood'&& item.language_level == 'Senior'" class="titleTop-leaver">幼儿·高级</view>
									<view v-else-if="item.age_grade == 'Teenagers' && item.language_level == 'Zero basis'" class="titleTop-leaver">青少年·零基础</view>
									<view v-else-if="item.age_grade == 'Teenagers'&& item.language_level == 'Primary'" class="titleTop-leaver">青少年·初级</view>
									<view v-else-if="item.age_grade == 'Teenagers'&& item.language_level == 'Intermediate'" class="titleTop-leaver">青少年·中级</view>
									<view v-else-if="item.age_grade == 'Teenagers'&& item.language_level == 'Senior'" class="titleTop-leaver">青少年·高级</view>
									<view v-else-if="item.age_grade == 'University Student' && item.language_level == 'Zero basis'"  class="titleTop-leaver">大学生·零基础</view>
									<view v-else-if="item.age_grade == 'University Student'&& item.language_level == 'Primary'" class="titleTop-leaver">大学生·初级</view>
									<view v-else-if="item.age_grade == 'University Student'&& item.language_level == 'Intermediate'" class="titleTop-leaver">大学生·中级</view>
									<view v-else-if="item.age_grade == 'University Student'&& item.language_level == 'Senior'" class="titleTop-leaver">大学生·高级</view>
									<view v-else-if="item.age_grade == 'Adult' && item.language_level == 'Zero basis'" class="titleTop-leaver">成年·零基础</view>
									<view v-else-if="item.age_grade == 'Adult'&& item.language_level == 'Primary'" class="titleTop-leaver">成年·初级</view>
									<view v-else-if="item.age_grade == 'Adult'&& item.language_level == 'Intermediate'" class="titleTop-leaver">成年·中级</view>
									<view v-else-if="item.age_grade == 'Adult'&& item.language_level == 'Senior'" class="titleTop-leaver">成年·高级</view>
								</view>
							</view>
						</view>	
					</view>
				</view>
				
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ageGrades:'',
				pageNumber:1,
				language:'',
				name:'',
				getAgeGradeslist:[],
				isTuijian: false,
				user_info: '',
				roomName: '', // 房间名称
				userName: '', // 用户名称
				roomList: [], // 房间列表
				isGetLoginInfo: false, // 是否已经获取登录信息
				firstshow: true, // 第一次显示页面
				tapTime: '', 
			}
		},
		onLoad(options) {
			this.option = options
			this.ageGrades = options.age_grade
			this.language = options.language
			this.name = options.name
			console.log(this.ageGrades,747474)
			uni.setNavigationBarTitle({//动态去设置导航标题
				title:this.name
			})
		},
		onReachBottom(){
			this.pageNumber++
			this.getageGradeslist()
			
		},
		onUnload:function(){
			this.getAgeGradeslist = []
		},
		onShow:function(){
			this.getageGradeslist()
		},
		methods: {
			getageGradeslist(){
				var _this = this
				var data  ={
					currentPage:_this.pageNumber,
				   	language:_this.language,
					age_grade:_this.ageGrades
				}
				this.myAjaxNew({//获取直播间
					model: 'user',
					controllerName: 'masterAppointment',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {	
						// _this.getAgeGradeslist = _this.getAgeGradeslist.concat(res.data.data)
						_this.getAgeGradeslist = _this.getAgeGradeslist.concat(res.data.data)
						//对课程开始结束时间进行判断
						if(_this.getAgeGradeslist.length == 0){
							_this.getAgeGradeslist.push({innull:'true'})
						}else{
							_this.getAgeGradeslist.map(item=>{
								var dateBegin = new Date(item.end_time.replace(/-/g, "/"));
								var dateEnd = new Date(item.start_time);
								var dateNow = new Date()
								var beginDiff = dateNow.getTime() - dateBegin.getTime();   
								var beginDayDiff = Math.floor(beginDiff / (24 * 3600 * 1000));
								var endDiff = dateEnd.getTime() - dateNow.getTime();
								var endDayDiff = Math.floor(endDiff / (24 * 3600 * 1000));
								if (endDayDiff < 0) {//直播已经结束
									item.mess=true
									 return false
								}
								if (beginDayDiff < 0) {//未开始
									return false;
								}else{//直播中
									return false
								}
							})
						}
					}
				})
			},
			goRoom: function(e) {
				// 防止两次点击操作间隔太快
				var nowTime = new Date();
				if (nowTime - this.tapTime < 1000) {
					return;
				}
				// .split('/')[1]
				console.info(e)
				let itemRoom = {
					groupName:e.group_name,
					label:e.label,
					language:e.language,
					onlineNum:e.online_num,
					flag:e.map.userinfo.national_flag,
					groupAvatar:e.map.userinfo.avatar,
					userName: e.map.userinfo.nick_name || '暂无昵称',
					userId:e.owner_id,
					payRoomId:e.id,
				}
				uni.getStorage({
					key:'nick_name',
					success(e){
						e.data//这就是你想要取的token
						
					}
				})
				uni.setStorageSync('liveRoomID', e.group_id)
				uni.setStorageSync('RoomID', e.id)
				uni.setStorageSync('liveAnchorID', e.owner_id)
				let pureAudio = /voice/.test(e.type) ? true : false
				console.log(e.group_id,8787822231)
				var url = '/pages/Meet/MLVBRoom/MLVBRoom?roomID=' + e.group_id + '&roomName=' + e.roomInfo + '&userName=' + this.user_info.nick_name + '&pureAudio=' + pureAudio +  '&itemRoom=' + JSON.stringify(itemRoom)
				
				console.info('进入房间的', itemRoom)
				uni.navigateTo({
					url: url
				});
				uni.showToast({
					title: '进入房间',
					icon: 'success',
					duration: 1000
				})
				this.tapTime = nowTime
			},
		}
	}
</script>

<style>
	page{
		background: #fff!important;
	}
	.Agelist{
		display: flex;
		height: 130upx;
		width: 46%;
		align-items: center;
		border-bottom: 1upx solid #DCDCDC;
		margin: 0 auto;
	}
	.Agelist_avatar{
		display: flex;
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
	}
	.Agelist_info{
		display: flex;
		width: 75%;
		height: 60upx;
		font-size: 26upx;
		margin-top: -30upx;
		align-items: center;
		position: absolute;
		left: 20%;
	}
	.Agelist_infochild{
		color: #00BCBB;
	}
	.Agelist_infochild:first-child{
		color: #000000;
		font-size: 20upx;
	}
	.Agelist_infochild:last-child{
		margin-left: auto;
		padding-right: 20upx;
	}
	.Agelist_type{
		display: flex;
		width: 75%;
		height: 40upx;
		margin-top: 30upx;
		font-size: 18upx;
		position: absolute;
		left: 20%;
		/* top: 120upx; */
	}
	.Agelist_typechild:last-child{
		margin-left: auto;
		padding-right: 20upx;
	}
	.Agelist_typechild{
		padding-left: 2%;
	}
	.Agelist_typechild:first-child{
		padding: 0;
	}
	.Agelist_type image{
		width: 20upx;
		height: 30upx;
	}
	/*新版样式*/
	.tuijianList {
		background: #DCDCDC;
		display: flex;
		flex-wrap: wrap;
	}
	.tuijianItem:nth-child(odd) {
		width: 47%;
		border-radius: 10upx;
		overflow: hidden;
		margin: 2%;
		position: relative;
		background: #FFFFFF;
		margin-bottom: 0;
	}
	.tuijianItem:nth-child(even){
		width: 47%;
		border-radius: 10upx;
		overflow: hidden;
		position: relative;
		background: #FFFFFF;
		margin: 2%;
		margin-left: 0;
		margin-bottom: 0;
	}
	.null_images{
		display: inline-flex;
		width: 100%;
		height: 100%;
	}
	.null_images>image{
		width: 100%;
	}
	.coverImg {
		height: 255upx;
		width: 100%;
		overflow: hidden;
	}
	.GroupOwner {
		display: flex;
		color: #FFFFFF;
		font-size: 24upx;
		position: absolute;
		left: 10upx;
		top: 220upx;
	}
	
	.GroupOwner image {
		width: 33UPX;
		height: 33upx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 10upx;
	}
	.titleTop {
		display: flex;
		justify-content: space-between;
		color: #333333;
		font-size: 28upx;
		text-align: center;
		height: 60upx;
	}
	.titleTop image {
		height: 40upx;
		width: 200upx;
	}
	.titleTop image:nth-of-type(1){
		height: 30upx;
		width: 150upx;
	}
	.airtimes{
		display: flex;
		align-items: center;
		width: 100%;
		height: 79%;
		position: absolute;
		left: 0;
		top: 0upx;
		text-align: center;
		background-color:rgba(0,0,0,0.25);
		/* opacity: 0.2; */
	}
	.thisairtimeimgs{
		position: absolute;
		width: 100%;
		top: 60upx;
	}
	.thisairtimeimgs>image{
		width: 60rpx;
		height: 60rpx;
	}
	.theairtimes{
		position: absolute;
		width: 100%;
		height: 40upx;
		color: #FFFFFF;
		font-size: 28upx;
		top: 140upx;
	}
	.titleTops {
		display: flex;
		justify-content: space-between;
		color: #333333;
		font-size: 28upx;
		text-align: center;
		width: 100%;
		position: absolute;
		left: 0upx;
		top: 0upx;
	}
	.titleTops image {
		height: 40upx;
		width: 200upx;
	}
	.titleTops image:nth-of-type(1){
		height: 30upx;
		width: 150upx;
	}
	.titleTop-leaver{
		width: 100upx;
		height: 20upx;
		border: 1upx solid #06C1AE;
		border-radius: 10upx;
		line-height: 20upx;
		color: #06C1AE;
		margin-top: 4upx;
		margin-right: 10upx;
		font-size: 16upx;
	}
</style>
